<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>个人资料</title>
    <link rel="stylesheet" type="text/css" href="../style/api.css" />
    <link rel="stylesheet" type="text/css" href="../style/head.css" />
    <link rel="stylesheet" type="text/css" href="../style/mui.min.css" />
    <style>
        #closeIt {
            position: absolute;
            top: 35px;
            left: 1rem;
            width: 2rem;
            height: 2rem;
        }

        main {
            padding-top: 75px;
        }

        .myInfo {
            background-color: #fff;
            border-top: 1px solid #ccc;
        }

        .infoItem {
            padding: 1rem 0.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #f2f2f2;
        }

        .infoItem img {
            width: 1.5rem;
            height: 1.5rem;
            margin-right: 0.3rem;
            vertical-align: middle;
        }

        .infoItem i {
            font-style: normal;
        }

        .infoItem span:nth-child(2) {
            color: #999;
        }

        .submit {
            padding: 1rem;
            width: 95%;
            color: #fff;
            text-align: center;
            margin: 0.5rem auto;
            border-radius: 0.5rem;
            background-color: #3949AB;
        }

        input {
            outline: none;
            border: none!important;
            margin-bottom: 0!important;
            width: 70%!important;
        }
    </style>
</head>

<body>
    <header>
        个人资料
        <img src="../img/icons/back.png" alt="" onclick="api.closeWin()" id="closeIt">
    </header>
    <main>
        <div class="myInfo">
            <div class="infoItem">
                <span>
                    <img src="../img/icons/uname.png" alt="">
                    <i>姓名</i>
                </span>
                <input type="text" placeholder="请输入姓名" id="uname">
            </div>
            <div class="infoItem">
                <span>
                    <img src="../img/icons/phone.png" alt="">
                    <i>手机号</i>
                </span>
                <input type="text" name="" value="" placeholder="请输入手机号" maxlength="11" id="phone">
            </div>
            <div class="infoItem">
                <span>
                    <img src="../img/icons/mail.png" alt="">
                    <i>邮箱</i>
                </span>
                <input type="text" placeholder="请输入邮箱" id="mail">
            </div>
        </div>
        <div class="submit">提交</div>
    </main>
</body>
<script type="text/javascript" src="../js/api.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/mui.min.js"></script>
<script type="text/javascript">
    apiready = function() {

    };

    $('.submit').click(function() {
        var userid = $api.getStorage('userid');
        var uname = $('#uname').val();
        var phone = $('#phone').val();
        var mail = $('#mail').val();
        var emailreg = new RegExp("^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$");
        if (!uname || $.trim(uname).length == 0) {
            api.toast({
                msg: '未输入姓名',
                duration: 2000,
                location: 'bottom'
            });
            return
        };

        if (!phone || $.trim(phone).length == 0) {
            api.toast({
                msg: '未输入手机号',
                duration: 2000,
                location: 'bottom'
            });
            return
        };

        if (!mail || $.trim(mail).length == 0) {
            api.toast({
                msg: '未输入邮箱',
                duration: 2000,
                location: 'bottom'
            });
            return
        };

        if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone))) {
            api.toast({
                msg: '手机号码不正确',
                duration: 2000,
                location: 'bottom'
            });
            return
        }

        if (!emailreg.test(mail)) {
            api.toast({
                msg: '邮箱格式不合规范',
                duration: 2000,
                location: 'bottom'
            });
            return
        }

        var btnArray = ['取消', '确定'];
        mui.confirm('确认修改？', '提示', btnArray, function(e) {
            if (e.index == 1) {
                api.ajax({
                    url: 'http://114.116.243.15/newbtb/appinfo/update.lecture',
                    method: 'post',
                    data: {
                        body: {
                            'tbname': 'lecture_user',
                            'id': userid,
                            'lecture_name': uname,
                            'lecture_phone': phone,
                            'lecture_mail': mail
                        }
                    }
                }, function(ret, err) {
                    if (ret) {
                        if(ret.status == 1) {
                            api.toast({
                                msg: '修改成功',
                                duration: 2000,
                                location: 'bottom'
                            });
                        }
                    }
                });
            } else {
                mui.toast('取消了操作');
            }
        })
    })
</script>

</html>
